<template>
<!--  评论管理-->
  <div class="box">
    <div class="comment-type">
      <div class="type-item" :class="currentType === 1?'active':''" @click="toVideoComment">视频评论</div>
      <div class="type-item" :class="currentType === 2?'active':''" @click="toDynamicComment">动态评论</div>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>
<script setup>

import {ref} from "vue";
import {useRouter} from "vue-router";
import emitter from "@/utils/emitter.js";

const currentType = ref()
const router = useRouter()

emitter.on("switchCommentType",(val)=>{
  currentType.value = val
})

const toVideoComment = () => {
  console.log(111111)
  router.push('/create/comments/v-c')
}
const toDynamicComment = () => {
  router.push('/create/comments/d-c')
}
</script>
<style lang="scss" scoped>
.box{
  .comment-type{
    display: flex;
    align-items: center;
    .type-item{
      display: flex;
      justify-content: center;
      height: 30px;
      width: 70px;
      margin-left: 10px;
    }
    .active{
      color: var(--subject-color--);
      border-bottom: 3px solid var(--subject-color--);
    }
  }
  .content{
    box-sizing: border-box;
    padding: 15px;
  }
}
</style>